import React, { useState, useEffect } from 'react';
import { connect } from 'react-redux';
import { View, Image, Text, Button } from '@tarojs/components';
import up from '@/images/common/up.png';
import down from '@/images/common/down.png';
import customer1 from '@/mainSubPack/images/customer/customer1.png';
import customer2 from '@/mainSubPack/images/customer/customer2.png';
import customer3 from '@/mainSubPack/images/customer/customer3.png';
import customer4 from '@/mainSubPack/images/customer/customer4.png';
import Taro from '@tarojs/taro';
import './index.scss';

const ServiceContent = ({ dispatch, className = '', customerServiceList = [] }) => {
  const [statusList, setStatusList] = useState([false, false, false]);
  const handleStatus = (idx) => {
    let sList = [...statusList];
    sList[idx] = !sList[idx];
    setStatusList(sList);
  };
  const resetStatusList = () => {
    setStatusList([false, false, false]);
  };
  const getCustomerServiceListNew = () => {
    resetStatusList();
    getCustomerServiceList();
  };
  const getCustomerServiceList = () => {
    dispatch({
      type: 'otherApi/getCustomerServiceList',
      payload: { alias: 'helpCenter' },
    });
  };
  const handleArt = (id) => {
    Taro.navigateTo({ url: '/mainSubPack/customerServiceArticle/index?id=' + id });
  };
  const goPage = (url) => {
    Taro.navigateTo({
      url,
    });
  };
  useEffect(() => {
    getCustomerServiceList();
  }, []);

  return (
    <View className={'ServiceContent ' + className}>
      <View className="txt28 bold label">猜你关心</View>
      <View className="flex-row-spaceBetween-center slist">
        <View
          className="flex-column--center item"
          onClick={() => goPage('/orderSubPack/order-list/index?tab=5')}
        >
          <Image className="img" src={customer1} />
          <Text className="text">退换售后</Text>
        </View>
        <View
          className="flex-column--center item"
          onClick={() => goPage('/orderSubPack/invoiceManagement/invoiceAssistant/index?from=mine')}
        >
          <Image className="img" src={customer2} />
          <Text className="text">发票服务</Text>
        </View>
        <View
          className="flex-column--center item"
          onClick={() => goPage('/orderSubPack/order-list/index')}
        >
          <Image className="img" src={customer3} />
          <Text className="text">我的订单</Text>
        </View>
        {Taro.$isH5 ? null : (
          <Button openType="contact" className="flex-column--center item cnt">
            <Image className="img" src={customer4} />
            <Text className="text">联系我们</Text>
          </Button>
        )}
      </View>
      <View className="alists">
        {customerServiceList &&
          customerServiceList.length > 0 &&
          customerServiceList.map((item, index) => (
            <View className="flex-row alist" key={'alist' + item.categoryId}>
              <View className="flex-column--center left">
                {item.icon && <Image className="mimg" src={item.icon} />}
                <Text className="txt24 ctext">{item.categoryName}</Text>
                {item.articleList.length > 2 && (
                  <View
                    className="flex-row-center-center arrow"
                    onClick={() => handleStatus(index)}
                  >
                    <Image className="aimg" src={statusList[index] ? up : down} />
                  </View>
                )}
              </View>
              <View className="right">
                {statusList[index]
                  ? item.articleList.map((art) => (
                      <View className="txt28 art" onClick={() => handleArt(art.id)} key={art.id}>
                        {art.name}
                      </View>
                    ))
                  : item.articleList.slice(0, 2).map((art) => (
                      <View className="txt28 art" onClick={() => handleArt(art.id)} key={art.id}>
                        {art.name}
                      </View>
                    ))}
              </View>
            </View>
          ))}
      </View>
      <View
        className="flex-row-center-center change customePageStyle"
        onClick={getCustomerServiceListNew}
      >
        换一换
      </View>
    </View>
  );
};

export default connect(({ otherApi }) => ({
  customerServiceList: otherApi.customerServiceList,
}))(ServiceContent);
